// 物料组分析
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { Button, Form, Input, Table, DatePicker } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import { FC, useState } from 'react';
import './index.css'
import axios from '../../../utils/axios'
interface DataType {
  materialId: string;  //序号
  materialName: string;  //物料组
  qualified: string;//合格
  generally: string;//让步接受
  returned: string;//退货
  review: string;//评审
  total: string;//总批数
  passRate: string;//合格率
  returnRate: string//退货率
}
const { RangePicker } = DatePicker;
const AnalyticalStatement: FC = () => {
  const [dataList, setDataList] = useState([])

  // 查询和重置按钮
  const TheQuery = () => {
    console.log(123);
  }
  const reset = () => {
    console.log(333);
  }
  // 导出
  const showModal = () => { };
  // --------------------
  const [form] = Form.useForm();
  //table表格数据
  axios({
    url: "/api3/material/materialAnalysis/selectMaterialCombination",
    method: "get",
  })
    .then((data) => setDataList(data.data.data.ListMaterialCombination))
    .catch((error) => console.log(error));
  let columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'materialId',
    },
    {
      title: '物料组',
      dataIndex: 'materialName',
      align: 'center',
      key: 'materialName'
    },
    {
      title: '合格',
      dataIndex: 'qualified',
      key: 'qualified'
    },
    {
      title: '让步接受',
      dataIndex: 'generally',
      key: 'generally'
    },
    {
      title: '退货',
      dataIndex: 'returned',
      key: 'returned'
    },
    {
      title: '评审',
      dataIndex: 'review',
      key: 'review'
    },
    {
      title: '总批数',
      dataIndex: 'total',
      key: 'total'
    },
    {
      title: '合格率',
      dataIndex: 'passRate',
      key: 'passRate'
    },
    {
      title: '退货率',
      dataIndex: 'returnRate',
      key: 'returnRate'
    }
  ];


  const data: DataType[] = [

  ];

  return (<div>
    <Form form={form} layout="inline" className='btnStyel'>
      <Form.Item >时间：<RangePicker /></Form.Item>
      <Form.Item >物料组:<Input className='inp' /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={TheQuery}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={reset}>重置</Button></Form.Item>
    </Form>
    <div><Button style={{ margin: '0.3rem' }} type="primary" onClick={showModal}>+导出</Button></div>
    <Table
      columns={columns}
      bordered
      dataSource={dataList}
      rowKey={(record) => record.materialId}
    />
  </div>

  );
};

export default AnalyticalStatement

